// 商家入驻
import { NavLink } from "react-router-dom";
import "./shangjia.scss";
import Header from "../../common/Header";
import { Carousel, Form, Input, Select, Row, Col, Button } from "antd";
import { QuestionCircleOutlined } from "@ant-design/icons";
const Product = props => {
  console.log(props);
  const base = props.location.pathname;

  return (
    <div className="product">
      <div className="mallentry-subnav">
        <Header />
        <div className="mallentry-subnav-container">
          <NavLink exact className="navlist" to={base + "/home"}>
            招商首页
          </NavLink>
          <NavLink className="navlist" to={base + "/entryflow"}>
            入驻流程
          </NavLink>
          <NavLink className="navlist" to="/qualifications">
            资质要求
          </NavLink>
          <NavLink className="navlist" to="/questions">
            常见问题
          </NavLink>
          <NavLink className="navlist" to="/hotbrands">
            热招品牌
          </NavLink>
        </div>
      </div>
      <div className="banner">
        <Carousel autoplay>
          <img
            src={
              require("../../view/assets/product/22852818-e089-4723-bb3a-a198ddf969d6.png")
                .default
            }
            alt=""
          />
          <img
            src={
              require("../../view/assets/product/login-banner.06e822f8.png")
                .default
            }
            alt=""
          />
        </Carousel>
        <div className="login-box">
          <div className="login-container">
            <div className="title">
              境内商家入驻
              <div className="oversea-guide">
                <a href="/">境外商家入驻</a>
                <QuestionCircleOutlined />
              </div>
            </div>
            <div className="form">
              {/* 手机号 */}
              <Form.Item
                name="phone"
                rules={[
                  { required: true, message: "Please input your phone number!" }
                ]}
                tooltip="手机号不能为空"
              >
                <Input addonBefore="中国 + 86" style={{ width: "100%" }} />
              </Form.Item>

              {/* 密码 */}
              <Form.Item
                name="password"
                rules={[
                  {
                    required: true,
                    message: "Please input your password!"
                  }
                ]}
              >
                <Input.Password />
              </Form.Item>

              {/* 验证码 */}
              <Form.Item>
                <Row gutter={8}>
                  <Col span={12}>
                    <Form.Item
                      name="captcha"
                      noStyle
                      rules={[
                        {
                          required: true,
                          message: "Please input the captcha you got!"
                        }
                      ]}
                    >
                      <Input />
                    </Form.Item>
                  </Col>
                  <Col span={12}>
                    <Button>Get captcha</Button>
                  </Col>
                </Row>
              </Form.Item>
              <Button
                style={{
                  width: "100%",
                  height: "40px",
                  background: "#ff5454",
                  color: "#fff",
                  border: "none"
                }}
              >
                0元入驻
              </Button>
              <div className="help">
                <div className="left">
                  已有账号？
                  <a href="/">
                    <span>立即登录</span>
                  </a>
                </div>
                <div className="note">
                  <a href="/">
                    <span>入驻手册</span>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
export default Product;
